import React, { Component } from 'react';
import Header from '../../components/Header'
import {Button, Form,Input} from 'antd-mobile'
import { loginFn } from '../../api/login';
import { useNavigate } from 'react-router';

import { connect } from 'react-redux';
import { REQUEST_LOGIN } from '../../store/types';

const Index = (props)=>{
  const navigate = useNavigate()
  return (
    <div className='box'>
        <Header title='登录' />
        <div className='content'>

          <Form layout='horizontal' mode='card' onFinish={(values)=>{
            // 该函数是在点击登录按钮的时候执行的函数
            // 在这个函数中有一个参数，该参数就是表单中输入的内容
            // 如果表单中 Form.Item 没有设置 name 属性，将无法获取到输入的内容
            // console.log('提交表单',values);
            // loginFn(values).then(res => {
            //   if(res.code === '200'){
            //     navigate('/home')
            //   }
            // })
            // 调用下面映射的 login 方法，且将用户数据传递出去
            props.login(values)

          }} footer={
            <Button color='danger' type='submit' block size='large'>登录</Button>
          }>
            <Form.Header>登录</Form.Header>
            <Form.Item name={'loginname'} rules={[{
              required: true,
               pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
               message: '请输入正确的 11 位手机号'
               }]} label='手机号'>
              <Input placeholder='请输入' />
            </Form.Item>
            <Form.Item name={'password'}>
              <Input placeholder='请输入密码' type='password' />
            </Form.Item>
          </Form>
        </div>
      </div>
  );

}

export default connect(null,(dispatch)=>{
  return {
    login(values){
      // console.log('666666',values);
      // 触发异步请求
      // 触发异步请求的时候将用户名和密码传递过去
      dispatch({type: REQUEST_LOGIN, paylod: values})
    }
  }
})(Index);
